<template>
  <div>
    <!-- 
      Login和Register组件只要Header不要Footer
      其他组件全都要
     -->
    <XHeader />
    <!-- 加载渲染路由组件 -->
    <router-view />
    <!-- 
      1. 不要Footer -> 隐藏Footer
        考虑 v-if / v-show
      2. 考虑操作是否频繁
        不频繁用v-if
     -->
    <!-- <XFooter v-if="$route.path !== '/login' && $route.path !== '/register'" /> -->
    <!-- <XFooter v-if="isShowFooter" /> -->
    <!-- <XFooter v-if="$route.meta.isShowFooter" /> -->
    <XFooter v-if="!$route.meta.isHiddenFooter" />
    <p>{{ num }}</p>
    <button @click="update">更新</button>
  </div>
</template>

<script>
import XHeader from "./components/Header";
import XFooter from "./components/Footer";

export default {
  name: "App",
  components: {
    XHeader,
    XFooter,
  },
  // computed: {
  //   isShowFooter() {
  //     const path = this.$route.path;
  //     return path !== "/login" && path !== "/register";
  //   },
  // },
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    update() {
      // eslint-disable-next-line
      debugger;
      this.num++;
    },
  },
};
</script>

<style lang="less"></style>
